/*
 * @Description: 用户管理
 * @Author: ldx
 * @Date: 2022-09-17 21:22:28
 * @LastEditors: ldx
 * @LastEditTime: 2022-09-29 22:41:42
 */
import { useAntdTable, useRequest } from 'ahooks'
import { Button, Col, Form, Input, Row, Select, Table } from 'antd'
const { Option } = Select
import moment from 'moment'
import { useState } from 'react'

import { queryAuditLog, queryCategory } from '@/api/setting/log'
import { PageContainer } from '@/components/pageContainer'
const Log = () => {
  const [form] = Form.useForm()

  const [categoryList, setCategoryList] = useState<any>([]) // 日志类型列表

  /** 角色分页列表 */
  const { tableProps, search } = useAntdTable(queryAuditLog, {
    form
  })

  /** 日志类型集合 */
  useRequest(queryCategory, {
    onSuccess: (res) => {
      setCategoryList(res.data)
    }
  })

  const columns: any[] = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'a',
      render: (text: string, record: any, index: number) => {
        return <span>{index + 1}</span>
      }
    },
    {
      title: '日志类型',
      align: 'center',
      dataIndex: 'category'
    },
    {
      title: '描述',
      align: 'center',
      dataIndex: 'description'
    },
    {
      title: '请求ip',
      align: 'center',
      dataIndex: 'requestIp'
    },
    {
      title: '链路',
      align: 'center',
      dataIndex: 'traceId'
    },
    {
      title: '创建时间',
      align: 'center',
      dataIndex: 'createTime',
      render: (text: string) => {
        return <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
      }
    },
    {
      title: '创建人',
      align: 'center',
      dataIndex: 'creatorName'
    }
  ]
  return (
    <>
      <PageContainer>
        <div>
          <Form form={form}>
            <Row gutter={24}>
              <Col span={5}>
                <Form.Item name="keyword">
                  <Input placeholder="请输入" />
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="日志类型" name="category">
                  <Select
                    placeholder="请选择资源"
                    style={{ width: '100%' }}
                    allowClear
                  >
                    {categoryList.map((item: any) => {
                      return (
                        <Option key={item} value={`${item}`}>
                          {item}
                        </Option>
                      )
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={3}>
                <Button onClick={() => search.submit()} type="primary">
                  搜索
                </Button>
              </Col>
            </Row>
          </Form>
          <Table
            columns={columns}
            scroll={{ x: 1400 }}
            rowKey={(record) => record.id}
            {...tableProps}
            pagination={{
              showTotal: (total, range) => {
                console.log('xxx', range)
                const num = Math.ceil(total / 10)
                return (
                  <span style={{ color: '#fff', marginRight: '10px' }}>
                    共{num}页/共{total}条结果
                  </span>
                )
              },
              ...tableProps.pagination
            }}
          />
        </div>
      </PageContainer>
    </>
  )
}

export default Log
